<template>
  <div class="app-container campContainer campManage">
    <BreadCrumb :typeFu="3" :statusFu="3"></BreadCrumb>

    <div class="header_btn">
      <el-button
        type="text"
        :class="{'is-active': activeName==1}"
        @click="handleClick({name:'1'})">待支付订单
      </el-button>
      <el-button
        type="text"
        :class="{'is-active': activeName==2}"
        @click="handleClick({name:'2'})">已支付(个人)订单
      </el-button>
      <el-button
        type="text"
        :class="{'is-active': activeName==3}"
        @click="handleClick({name:'3'})">已退费订单
      </el-button>
    </div>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待支付订单" name="1">
        <div v-if="activeName==1">
          <wait-pay-order></wait-pay-order>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已支付(个人)订单" name="2">
        <div v-if="activeName==2">
          <pay-order-by-personal></pay-order-by-personal>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已退费订单" name="3">
        <div v-if="activeName==3">
          <refund-order></refund-order>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import BreadCrumb from "@/components/CampSystem/CampOper/BreadCrumb";
  import WaitPayOrder from "@/components/CampSystem/Financial/WaitPayOrder";
  import PayOrderByPersonal from "@/components/CampSystem/Financial/PayOrderByPersonal";
  import RefundOrder from "@/components/CampSystem/Financial/RefundOrder";

  export default {
    name: "financial",
    components: {
      BreadCrumb,
      WaitPayOrder,
      PayOrderByPersonal,
      RefundOrder
    },
    data() {
      return {
        activeName: '1', // tabs绑定数字
      };
    },
    created() {
      let active = this.$route.query.active;
      if(active){
        this.activeName = this.$route.query.active;
      }else{
        this.$router.push({query: {active: '1'}});
      }
    },
    methods: {
      handleClick(tab) {
        const that = this;
        that.activeName = tab.name;
        that.$router.push({query: {active: tab.name}});
      },
    }
  }
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
  @import "@/assets/styles/campCommon.scss";

  .campManage {
    height: 100%;
    display: flex;
    flex-flow: column;

    .header_btn {
      height: 60px;
      background-color: #ffffff;
      padding: 5px 30px;
      margin: 20px 0;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      border-radius: 4px;

      .el-button {
        height: 50px;
        line-height: 50px;
        padding: 0 5px;
        margin: 0 30px 0 0;
        color: #303133;
        border: 0;
        border-radius: 0;

        &:hover {
          color: #1890ff;
        }

        &.is-active {
          color: #1890ff;
          border-bottom: 2px solid #1890ff;
        }
      }
    }

    .el-tabs {
      flex: 1;
      display: flex;
      flex-flow: column;
      overflow: hidden;
      /*margin-top: 20px;*/

      .el-tabs__header {
        padding: 5px 30px;
        margin-bottom: 20px;
        background-color: #ffffff;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        border-radius: 4px;
        display: none;

        .el-tabs__nav-wrap::after {
          height: 0;
        }

        .el-tabs__active-bar {
          height: 0;
        }

        .el-tabs__item {
          height: 50px;
          line-height: 50px;
          padding: 0 5px;
          margin: 0 30px 0 0;

          &:nth-child(1) {
            margin: 0 !important;
          }

          &.is-active {
            color: #1890ff;
            border-bottom: 2px solid #1890ff;
          }
        }
      }

      .el-tabs__content {
        overflow: auto;
      }
    }
  }
</style>


